{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Automation</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'css/bootstrap-select.min.css' %}" type="text/css">    
    <link rel="stylesheet" href="{% static 'css/create_top.css' %}" type="text/css">

    <script type="text/javascript" src="{% static 'js/jquery-3.1.0.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/bootstrap-select.min.js' %}"></script>    
    <script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/e-smart-zoom-jquery.min.js' %}"></script>

    <!--<script>
        $(document).ready(function () {
            $('#top').smartZoom({
                maxScale : 2,
                dblClickMaxScale : 1.8,
                pinchEnabled : false,
                touchMoveEnabled : false,
                dblTapEnabled : false

            });
        });
    </script>-->

    <script language="javascript">
        function bigimg(i) {
            console.log(i.style.zoom);
            var zoom = parseInt(i.style.zoom, 10) || 100;
            zoom += event.wheelDelta / 12;
            if(zoom > 0) {
                i.style.zoom = zoom + '%';
                return false;
            }
        }      

        function restoreSize(i) {
            i.style.zoom = '80%';
            return false;
        }      
    </script>
</head>


<body>
    <div id="left">
        <div id="topContainer">
            <img id="top" src="{% static 'images/full_top.jpg' %}" style="cursor:pointer; zoom:80%",
            onmousewheel="return bigimg(this)" ondblclick="return restoreSize(this)"/>
        </div>
    </div>

    <div id="right">
        <form action="{% url 'autocases:save_created_top' %}" method="post" class="form-horizontal">
            <!--
            <div class="form-group">
                <label for="top_name" class="col-sm-2 control-label">拓扑名称</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="top_name" id="top_name"  placeholder="myname_top.txt">
                    <p class="text-primary">命名时要上点心哦, 小心文件被覆盖</p>
                </div>
            </div>                  
            -->

            <div class="form-group">
                <label for='device' class='col-sm-2 control-label'>选项: </label>
                <!-- device select -->
                <div class="col-sm-5">
                    <select name="device" id="device" class="selectpicker" data-live-search="true">
                        <option value="baseInfo">基本信息</option>
                        <option value="ac1">AC1</option>
                        <option value="ac2">AC2</option>
                        <option value="switch">Switch</option>
                        <option value="poe">PoE</option>
                        <option value="portal">Portal(SBB)</option>                        
                        <option value="vgportal">VGPortal</option>                        
                        <option value="radius">Radius</option>                        
                        <option value="radius2">Radius2</option>                        
                        <option value="tester1">Tester1</option>
                        <option value="tester2">Tester2</option>
                        <option value="tester3">Tester3</option>
                        <option value="tester4">Tester4</option>
                        <option value="tester5">Tester5</option>
                        <option value="station1">Station1</option>
                        <option value="station2">Station2</option>
                        <option value="station3">Station3</option>
                        <option value="station4">Station4</option>
                        <option value="wireshark">Wireshark</option>
                        <option value="dumpServer">DumpServer</option>
                        <option value="ftp_tftp_dns_server">Ftp_Tftp_Dns_Server</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-default col-sm-1 control-label" style="text-align:center">提交</button>
                <p class='text-info col-sm-4 control-label'>
                    <a href="{% url 'autocases:select_top' %}">想选一个现成的Top吗, 点我呀!</a>
                </p>                    
            </div>               
            <div id="content">
                {% include "section/baseInfo.html" %}
                {% include "section/ac1.html" %}
                {% include "section/ac2.html" %}
                {% include "section/switch.html" %}
                {% include "section/poe.html" %}
                {% include "section/portal.html" %}
                {% include "section/vgportal.html" %}
                {% include "section/radius.html" %}
                {% include "section/radius2.html" %}
                {% include "section/Tester1.html" %}
                {% include "section/Tester2.html" %}
                {% include "section/Tester3.html" %}
                {% include "section/Tester4.html" %}
                {% include "section/Tester5.html" %}
                {% include "section/station1.html" %}
                {% include "section/station2.html" %}
                {% include "section/station3.html" %}
                {% include "section/station4.html" %}
                {% include "section/wireshark.html" %}
                {% include "section/dumpServer.html" %}
                {% include "section/ftp_tftp_dns_server.html" %}
            </div>

            <!--
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">               
                    <button type="submit" class="btn btn-default">提交</button>
                </div>
            </div>                
            -->
        </form>
    </div>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#device').change(function(){
                $('.deviceClass').css('display' , 'none');
                var $deviceValue = $('#device').val();
                console.log($deviceValue);
                $('#'+ $deviceValue).css('display', 'block');
            })
        })
    </script>    
</body>

</html>